<!-- 首页 -->
<template>
	<div>
		<x-mheader></x-mheader>
		<div class="home-container">
			<div class="container-top">
				<div class="header-rightNav">
					<ul class="header-rightNav-ul">
						<li class="header-rightNav-li">
							<div class="header-rightNav-li-img">
								<el-icon style="height:100%;width:100%" :size="30" color="#757575">
									<Iphone />
								</el-icon>
							</div>
							<div class="header-rightNav-li-text">手机APP</div>
						</li>
						<li class="header-rightNav-li">
							<div class="header-rightNav-li-img">
								<el-icon style="height:100%;width:100%" :size="30" color="#757575">
									<User />
								</el-icon>
							</div>
							<div class="header-rightNav-li-text">个人中心</div>
						</li>
						<li class="header-rightNav-li">
							<div class="header-rightNav-li-img">
								<el-icon style="height:100%;width:100%" :size="30" color="#757575">
									<SoldOut />
								</el-icon>
							</div>
							<div class="header-rightNav-li-text">售后服务</div>
						</li>
						<li class="header-rightNav-li">
							<div class="header-rightNav-li-img">
								<el-icon style="height:100%;width:100%" :size="30" color="#757575">
									<Service />
								</el-icon>
							</div>
							<div class="header-rightNav-li-text">人工客服</div>
						</li>
						<li class="header-rightNav-li">
							<div class="header-rightNav-li-img">
								<el-icon style="height:100%;width:100%" :size="30" color="#757575">
									<ShoppingCart />
								</el-icon>
							</div>
							<div class="header-rightNav-li-text">购物车</div>
						</li>
					</ul>
				</div>
				<div class="container-top-left">
					<ul>
						<li>
							手机
							<el-icon class="arrow-icon">
								<arrow-right-bold />
							</el-icon>
							<div class="left-list-one"></div>
						</li>
						<li>
							电视
							<el-icon class="arrow-icon">
								<arrow-right-bold />
							</el-icon>
						</li>
						<li>
							笔记本 平板
							<el-icon class="arrow-icon">
								<arrow-right-bold />
							</el-icon>
						</li>
						<li>
							家电
							<el-icon class="arrow-icon">
								<arrow-right-bold />
							</el-icon>
						</li>
						<li>
							出行 穿戴
							<el-icon class="arrow-icon">
								<arrow-right-bold />
							</el-icon>
						</li>
						<li>
							智能 路由器
							<el-icon class="arrow-icon">
								<arrow-right-bold />
							</el-icon>
						</li>
						<li>
							电源 配件
							<el-icon class="arrow-icon">
								<arrow-right-bold />
							</el-icon>
						</li>
						<li>
							健康 儿童
							<el-icon class="arrow-icon">
								<arrow-right-bold />
							</el-icon>
						</li>
						<li>
							耳机 音箱
							<el-icon class="arrow-icon">
								<arrow-right-bold />
							</el-icon>
						</li>
						<li>
							生活 箱包
							<el-icon class="arrow-icon">
								<arrow-right-bold />
							</el-icon>
						</li>
					</ul>
				</div>
				<div class="container-top-right">
					<el-carousel :interval="5000" arrow="always" height="460px">
						<el-carousel-item>
							<img src="../assets/1e69f9bc504d70357bc58974cc1e7a05.webp" alt="" />
						</el-carousel-item>
						<el-carousel-item>
							<img src="../assets/b158441e01e7acd9ad27a49bbac4c0fa.webp" alt="" />
						</el-carousel-item>
						<el-carousel-item>
							<img src="../assets/8620324582df4fb2376138363d76812a.jpg" alt="" />
						</el-carousel-item>
						<el-carousel-item>
							<img src="../assets/a7a0fbd73e4f0f45ec66802d050f12b0.jpg" alt="" />
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="container-top-button">
					<div class="container-top-button-left">
						<ul>
							<li>
								<el-icon color="white" size="24px">
									<clock />
								</el-icon>
								<p>保障服务</p>
							</li>
							<li>
								<el-icon color="white" size="24px">
									<office-building />
								</el-icon>
								<p>企业团购</p>
							</li>
							<li>
								<el-icon color="white" size="24px">
									<files />
								</el-icon>
								<p>F码通道</p>
							</li>
							<li>
								<el-icon color="white" size="24px">
									<credit-card />
								</el-icon>
								<p>米粉卡</p>
							</li>
							<li>
								<el-icon color="white" size="24px">
									<refresh />
								</el-icon>
								<p>以旧换新</p>
							</li>
							<li>
								<el-icon color="white" size="24px">
									<iphone />
								</el-icon>
								<p>话费充值</p>
							</li>
						</ul>
					</div>
					<div class="container-top-button-right">
						<ul class="container-top-button-right-ul">
							<li class="container-top-button-right-ul-li"><img
									src="../assets/0ab8e5096ac6f08bd632e4d5a15d1792.jpg" alt=""></li>
							<li class="container-top-button-right-ul-li"><img
									src="../assets/2596938425e8d9019ffae94fbcfa4524.jpg" alt=""></li>
							<li class="container-top-button-right-ul-li"><img
									src="../assets/d0c0c4d84bc85c12d936bf5d8775af44.jpg" alt=""></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="home-container-other">
			<div class="page-home-main">
				<div class="home-banner-box"><img src="../assets/b2a3468c474addf9140a21cc77a87d5c.webp" alt=""></div>
				<div class="box-hd">
					<h2 class="title">手机</h2>
					<div class="more"><a data-scm="cms.0.0.0.0.0.0.0" data-spm="cms_10530.3480926.2" href="//www.mi.com/p/1915.html" target="_blank" class="more-link" data-params="{&quot;component&quot;:&quot;list_eight_product&quot;,&quot;component_name&quot;:&quot;\u3010\u4ea7\u54c1\u3011\u697c\u5c42\u5355TAB &quot;}">查看更多<i class="iconfont iconfont-arrow-right-big"><el-icon size="12px"><ArrowRightBold /></el-icon></i></a></div>
				</div>
				<div class="clearfix">
					<div class="clearfix-left"><img src="../assets/ac5cafc68c10ce4471869d378f594b52.webp" alt=""></div>
					<div class="clearfix-right">
						<div class="clearfix-right-item" v-for="itme in allgoods" :key="itme.goodsId">
							<div class="item-img">
								<img src="../assets/211bb83776a8e0c8358732c3f3aa2864.webp" alt="">
							</div>
							<h3>{{itme.goodName}}</h3>
							<p class="desc">天玑8100｜真旗舰芯</p>
							<p class="price">{{itme.goodsPrice}}元起</p>
						</div>
						<div class="clearfix-right-item">
							<div class="item-img">
								<img src="../assets/211bb83776a8e0c8358732c3f3aa2864.webp" alt="">
							</div>
							<h3>Redmi K50</h3>
							<p class="desc">天玑8100｜真旗舰芯</p>
							<p class="price">2399元起</p>
						</div>
						<div class="clearfix-right-item">
							<div class="item-img">
								<img src="../assets/211bb83776a8e0c8358732c3f3aa2864.webp" alt="">
							</div>
							<h3>Redmi K50</h3>
							<p class="desc">天玑8100｜真旗舰芯</p>
							<p class="price">2399元起</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import XMheader from "../components/XMheader.vue";
import {
	ArrowRightBold,
	Clock,
	OfficeBuilding,
	Files,
	CreditCard,
	Refresh,
	Iphone,
	User,
	Service,
	SoldOut,
	ShoppingCart,
	ArrowRight
} from "@element-plus/icons-vue";
import { getMain } from "../common/serve";
import { useStore } from "vuex";
import { ref } from "vue";
export default {
	name: "index",
	setup(props) { 
		const allgoods = ref([]);
		const store = useStore();
		return {
			allgoods,
			store
		}
	},
	components: {
		ArrowRightBold,
		Clock,
		OfficeBuilding,
		Files,
		CreditCard,
		Refresh,
		Iphone,
		XMheader,
		User,
		Service,
		SoldOut,
		ShoppingCart,
		ArrowRight
	},
	created(){
		getMain().then(
			(res)=>{
				this.allgoods = res.data.data.items
				this.store.commit("getAllGoods",res.data.data.items)
				console.log(this.allgoods);
			}
		)
	}
};
</script>

<style>
@import "../assets/style.css";
</style>
